<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .g6-tooltip {
      border: 1px solid #e2e2e2;
      border-radius: 4px;
      font-size: 12px;
      color: #545454;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 10px 8px;
      box-shadow: rgb(174, 174, 174) 0px 0px 10px;
    }
  </style>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script src="../build/minimap.js"></script>
<script src="./assets/d3-4.13.0.min.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script>
  const minimap = new Minimap({ size: [ 200, 160 ] });
  const graph = new G6.Graph({
    container: 'mountNode',
    width: 1000,
    height: 800,
    autoPaint: false,
    plugins: [ minimap ],
    modes: {
      default: ['drag-canvas', {
        type: 'tooltip',
        formatText: model => { return  model.name}
      }, {
        type: 'edge-tooltip',
        formatText: (model, e) => {
          const edge = e.item;
          return '来源：' + edge.getSource().getModel().name + '<br/>去向：' + edge.getTarget().getModel().name;
        }
      }, {
        type: 'activate-relations',
        activeState: 'highlight',
        inactiveState: 'dark'
      }]
    },
    defaultNode: {
      size: [10, 10],
      color: 'steelblue'
    },
    defaultEdge: {
      size: 1
    },
    nodeStyle: {
      default: {
        lineWidth: 2,
        fill: '#fff',
        opacity: 0.8
      },
      highlight: {
        opacity: 1
      },
      dark: {
        opacity: 0.2
      }
    },
    edgeStyle: {
      default: { stroke: '#e2e2e2', lineAppendWidth: 2 },
      highlight: { stroke: '#999' }
    }
  });
  $.getJSON('./assets/data/xiaomi.json', data => {
    graph.data({ nodes: data.nodes, edges: data.edges.map((edge, i) => {
        edge.id = 'edge' + i;
        return Object.assign({}, edge);
      }) });
    const simulation = d3.forceSimulation()
      .force("link", d3.forceLink().id(function(d) { return d.id; }).strength(0.5))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(500,300));
    simulation
      .nodes(data.nodes)
      .on("tick", ticked);
    simulation.force("link")
      .links(data.edges);

    graph.render();

    function ticked() {
      graph.refreshPositions();
      graph.paint();
    }
  });
</script>
</body>
</html>
